/* total */
<template xlang="wxml">
  <div class="total">
    <!-- 页面头部 -->
    <div class="header">告警数量统计</div>
    <!-- 页面内容 -->
    <div class="main">
      <van-row>
        <van-col v-for="(item,index) in list" :key="index" :span="6">
          <View class="content">
            <p>{{item.name}}</p>
            <p>{{item.num}}</p>
            <p>设备&ensp;{{item.deviceNum}}</p>
          </View>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    list: [
      { name: "今日告警", num: "6", deviceNum: 8 },
      { name: "本周告警", num: "10", deviceNum: 8 },
      { name: "本月告警", num: "12", deviceNum: 8 },
      { name: "本季告警", num: "50", deviceNum: 12 }
    ]
  }),
  methods: {},
  computed: {},
  watch: {}
};
</script>

<style lang="less" scoped>
.total {
  background: #1989fa;
  padding: 20px 10px;
  color: #fff;
  .header {
    font-size: 16px;
    padding-bottom: 20px;
  }
  .main {
    .content {
      p {
        text-align: center;
        font-size: 14px;
        line-height: 35px;
        &:nth-child(2) {
          font-size: 20px;
          font-weight: 700;
        }
      }
    }
  }
}
</style>